<template>
    <div>
        <el-row style="height:50px;font-size:20px;margin-left:20px;margin-right:20px;" >
            <el-col :span="23" style="height:50px;" class="goCenterUp">
                <el-breadcrumb separator=">">
                    <el-breadcrumb-item :to="{ path: '/home/firstPage' }">后台管理</el-breadcrumb-item>
                    <el-breadcrumb-item>管理</el-breadcrumb-item>
                    <el-breadcrumb-item>委培管理</el-breadcrumb-item>
                    <el-breadcrumb-item>委培详情</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col :span="1" style="height:50px;" class="goCenterUp">
                <el-button type="primary" size="mini" @click="goToConsign">确定</el-button>
            </el-col>
        </el-row>
        <div class="line"></div>
        <el-container>
            <el-main style="padding:20px;">
                <div style="margin-left:70px;margin-right:70px;height:125px;">
                    <el-row>
                        <i class="el-icon-document" style="font-size:25px;color:#409EFF;"></i>
                        <span style="color:#409EFF">基本信息</span>
                    </el-row>
                    <el-row style="height:60px;margin-top:10px;">
                        <el-col :span="3" >
                            <el-image :src="url" style="height:90px;width:90px;">
                            </el-image>
                        </el-col>
                        <el-col :span="21">
                            <el-row >
                                <i class="el-icon-postcard" style="color:#409EFF"></i> 
                                <span style="font-size:14px;color:#909090;">委培名：{{consignInfo.name}}</span>
                            </el-row>
                            <el-row style="margin-top:10px">
                                <i class="el-icon-sell"  style="color:#409EFF"></i>
                                <span style="font-size:14px;color:#909090;">发布方：{{consignInfo.company}}</span>
                            </el-row>
                            <el-row style="margin-top:10px">
                                <i class="el-icon-phone-outline"  style="color:#409EFF"></i>
                                <span style="font-size:14px;color:#909090;">联系方式：{{consignInfo.contact}}</span>
                            </el-row>
                        </el-col>
                    </el-row>
                </div>
                <div style="margin-top:15px;margin-left:70px;margin-right:70px;height:125px;">
                    <el-row>
                        <i class="el-icon-s-data" style="font-size:25px;color:#409EFF;"></i>
                        <span style="color:#409EFF">重要指标</span>
                    </el-row>
                    <el-row style="margin-top:10px;">
                        <el-table 
                            style="width:100%;"
                            :data="zhiBiaoData"
                            stripe
                            border
                            
                        >
                        <el-table-column
                        prop="dianJi"
                        label="点击量"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="baoMing"
                        label="报名量"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="shouCang"
                        label="收藏量"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="fenXiang"
                        label="分享量"
                        align="center"
                        >
                        </el-table-column>
                        </el-table>
                    </el-row>
                </div>
                <div style="margin-top:15px;margin-left:70px;margin-right:70px;height:160px;">
                    <el-row>
                        <i class="el-icon-user-solid" style="font-size:25px;color:#409EFF;"></i>
                        <span style="color:#409EFF">报名情况</span>
                    </el-row>
                    <el-row style="margin-top:10px;">
                        <el-table
                        :data="baoMingData"
                        height="300"
                        border
                        style="width: 100%">
                        <el-table-column
                        prop="realname"
                        label="姓名"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="contact"
                        label="联系方式"
                        align="center"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="datetime"
                        label="报名时间"
                        align="center"
                        >
                        </el-table-column>
                    </el-table>
                    </el-row>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
    data(){
        return{
            url: '',
            baoMingData:[],
            zhiBiaoData:[
                {
                    dianJi:'',
                    baoMing:'',
                    shouCang:'',
                    fenXiang:''
                },
            ],
            consignInfo:{
                name:'',
                company:'',
                contact:'',
            },
            consignId:'',
        }
    },
    mounted(){
        var consignId=this.$route.query.consignId;
        this.consignId=consignId;
        
        this.getconsignInformation();
        this.getconsignIndex();
        this.getconsignCondition();
        
    },
    methods:{
        //报名信息
        getconsignCondition(){
            var URL='http://47.101.180.43:8075/consign/consignCondition'
                        this.$ajax({
                        method:'get',
                        url:URL,
                        params:{
                            consignId:this.consignId,
                        },
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            this. baoMingData=response.data.data;
                            console.log(this. baoMingData);
                        }else{
                            console.log(response.data.msg); 
                            this.$notify({
                                message:response.data.msg
                            });
                        }
                    }).catch(error => {
                    console.log('报名获取失败');
                    });
        },
        //重要指标
        getconsignIndex(){
            var URL='http://47.101.180.43:8075/consign/consignIndex'
                        this.$ajax({
                        method:'get',
                        url:URL,
                        params:{
                            consignId:this.consignId,
                        },
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            console.log(response.data.data);
                            this.zhiBiaoData[0].dianJi=response.data.data.clickCount;
                            this.zhiBiaoData[0].baoMing=response.data.data.enrollCount;
                            this.zhiBiaoData[0].shouCang=response.data.data.collectCount;
                            this.zhiBiaoData[0].fenXiang=response.data.data.shareCount;
                        }else{
                            console.log(response.data.msg); 
                            this.$notify({
                                message:response.data.msg
                            });
                        }
                    }).catch(error => {
                    console.log('重要指标获取失败');
                    });
        },
        //基本信息
        getconsignInformation(){
            var URL='http://47.101.180.43:8075/consign/consignBasicInformation'
                        this.$ajax({
                        method:'get',
                        url:URL,
                        params:{
                            consignId:this.consignId,
                        },
                    }).then(response =>{
                        var code=0;
                        code=response.data.code;
                        if(code==0){
                            console.log(response.data.data);
                            this.consignInfo.name=response.data.data.consignName;
                            this.consignInfo.company=response.data.data.companyName;
                            this.consignInfo.contact=response.data.data.contact;
                        }else{
                            console.log(response.data.msg); 
                            this.$notify({
                                message:response.data.msg
                            });
                        }
                    }).catch(error => {
                    console.log('基本信息获取失败');
                    });
        },
        //返回委培
        goToConsign(){
            this.$router.push({
                path:'/home/consign',
            })
        },
    }
}
</script>
<style>
.line{
    height:10px;
    background-color: #F0F0F0;
}
.goCenterUp{
    display: flex;
    align-items: center
}
</style>